<template>
<div>
  <el-card class="box-card">
  <div slot="header" class="clearfix">
      <h3>用户管理</h3>
    <el-form :inline="true" :model="selDataForm" class="demo-form-inline" size="small">
  <el-form-item label="手机号" prop="phone">
    <el-input v-model="selDataForm.phone" placeholder="请输入手机号"></el-input>
  </el-form-item>
  <el-form-item label="注册日期">
      <el-date-picker
      v-model="selDataForm.dateTime"
      type="daterange"
      align="center"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      clearable
      :picker-options="pickerOptions">
    </el-date-picker>
  </el-form-item>
  <el-form-item>
    <el-button  type="primary" size="small" @click="selTableData">查询</el-button>
  </el-form-item>
</el-form>
  </div>

   <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="用户ID"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        label="头像"
        align="center"
       >
       <template  slot-scope="scope">
           <el-avatar size="medium" :src="scope.row.portrait||'http://www.lgstatic.com/thumbnail_100x100/i/image2/M01/5E/65/CgotOVszSAOANi0LAAAse2IVWAE693.jpg'"></el-avatar>
       </template>
      </el-table-column>
      <el-table-column
        prop="name"
        align="center"
        label="用户名">
      </el-table-column>
      <el-table-column
        prop="phone"
        align="center"
        label="手机号">
      </el-table-column>
      <el-table-column
        prop="createTime"
        align="center"
        label="注册时间">
      </el-table-column>
       <el-table-column
      align="center"
        label="状态">
        <template slot-scope="scope">
           <div class='redRound' v-if='scope.row.isDel'></div>
           <div class='greenRound' v-else></div>
        </template>
      </el-table-column>
      <el-table-column
      align="center"
        label="操作">
        <template slot-scope="scope">
            <el-link @click="forbid(scope.row)">{{scope.row.isDel?"开启":"禁用"}}</el-link>
             &nbsp;
             <el-link @click="distribution(scope.row)">分配角色</el-link>
        </template>
      </el-table-column>

    </el-table>
<br />

<el-pagination
  background
  layout="total, sizes, prev, pager, next, jumper"
  :total="page.total"
  :page-size="page.size"
  :current-page="page.current"
  @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  >
</el-pagination>

</el-card>

<el-dialog
  title="分配角色"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <div class="dialogDivClass">

  <el-form ref="form" :model="insertForm"  size="small">
  <el-form-item>
        <el-select
        v-model="insertForm.roleIdList"
        multiple
        collapse-tags
        placeholder="请选择">
        <el-option
        v-for="item in roleAllList"
        :key="item.value"
        :label="item.name"
        :value="item.id">
        </el-option>
    </el-select>
  </el-form-item>
</el-form>
<el-button type="primary" @click="insertData" size="small">确定</el-button>
 </div>
</el-dialog>
</div>
</template>

<script lang="ts">
import Vue from 'vue'
import { getUserPages, forbidUser, enableUser } from '@/service/user'
import { getRolesWithUserPermission, allocateUserRoles } from '@/service/role'
export default Vue.extend({
  name: 'user',
  data () {
    return {

      dialogVisible: false,
      selDataForm: {
        currentPage: 0,
        pageSize: 0,
        dateTime: []
      },
      roleAllList: [],
      insertForm: {
        roleIdList: [],
        userId: ''
      },
      dateTime: '',

      categoryList: [],
      tableData: [],
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker:any) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker:any) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker:any) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  methods: {
    async selTableData (flag:boolean) {
      if (flag) {
        this.page.current = 1
      }
      console.log(this.selDataForm.dateTime)
      const selData = { ...this.selDataForm, startCreateTime: null, endCreateTime: null }

      if (this.selDataForm.dateTime) {
        selData.startCreateTime = this.selDataForm.dateTime[0]
        selData.endCreateTime = this.selDataForm.dateTime[1]
      }

      selData.pageSize = this.page.size
      selData.currentPage = this.page.current
      const { data } = await getUserPages({ ...selData })
      console.log(data)
      if (data.code === '000000') {
        this.tableData = data.data.records
        this.page.total = parseInt(data.data.total)
      }
    },
    handleEdit (row:any) {
      this.insertForm = row
      this.dialogVisible = true
    },
    async forbid (row:any) {
      if (row.isDel) {
        const { data } = await enableUser(row.id)
        if (data.code === '000000') {
          this.$message.success(data.mesg)
        } else {
          this.$message.error(data.mesg)
        }
        this.selTableData(true)
      } else {
        const { data } = await forbidUser({ id: row.id })
        if (data.code === '000000') {
          this.$message.success(data.mesg)
        } else {
          this.$message.error(data.mesg)
        }
        this.selTableData(true)
      }
    },
    async distribution (row:any): Promise<void> {
      this.insertForm.userId = row.id
      const { data } = await getRolesWithUserPermission(row.id)
      if (data.code === '000000') {
        this.roleAllList = data.data
        this.dialogVisible = true
        const IdList:Array<never> = []
        for (const i in data.data) {
          if (data.data[i].hasPermission) {
            IdList.push(data.data[i].id as never)
          }
        }
        this.insertForm.roleIdList = IdList
      }
    },

    handleClose (done:any) {
      done()
    },

    handleSizeChange (val:number) {
      this.page.size = val
      this.selTableData(true)
    },
    handleCurrentChange (val:number) {
      this.page.current = val
      this.selTableData(false)
    },
    async insertData () {
      const { data } = await allocateUserRoles(this.insertForm)
      if (data.code === '000000') {
        this.$message.success(data.mesg)
        this.dialogVisible = false
      } else {
        this.$message.error(data.mesg)
      }
    }

  }

})

</script>

<style lang="scss" scoped>
  .dialogDivClass{
    width:50%;
    min-width:300px;
    margin:0 auto;
  }
  .redRound{
      background-color: red;
      width:15px;
      height:15px;
      border-radius: 15px;
      margin:0 auto
  }
  .greenRound{
      background-color: #51cf66;
      width:15px;
      height:15px;
      border-radius: 15px;
      margin:0 auto
  }
</style>
